<template>
<!-- 首页路由 -->
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="top">
      <div class="add">+</div>
      <div class="input">
        <input type="text" @click="toSrearch" v-if="placeholder" :placeholder="placeholder" >
        <input type="text" @click="toSrearch" v-else >
        <img src="../assets/images/search.png" alt="" class="search">
      </div>
      <div class="right">
        <svg t="1637047050407" @click="toMenuNav" class="more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7409" width="64" height="30">
          <path d="M189.711248 275.621385l-42.97886 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l42.97886 0c11.879562 0 21.441335 9.593496 21.441335 21.457708C211.152583 265.979794 201.590809 275.621385 189.711248 275.621385L189.711248 275.621385zM877.373013 275.621385l-515.746324 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l515.746324 0c11.799744 0 21.441335 9.593496 21.441335 21.457708C898.814348 265.979794 889.172757 275.621385 877.373013 275.621385L877.373013 275.621385zM189.711248 533.494547l-42.97886 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l42.97886 0c11.879562 0 21.441335 9.593496 21.441335 21.457708C211.152583 523.852956 201.590809 533.494547 189.711248 533.494547L189.711248 533.494547zM877.373013 533.494547l-515.746324 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l515.746324 0c11.799744 0 21.441335 9.593496 21.441335 21.457708C898.814348 523.852956 889.172757 533.494547 877.373013 533.494547L877.373013 533.494547zM189.711248 791.367709l-42.97886 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l42.97886 0c11.879562 0 21.441335 9.593496 21.441335 21.457708C211.152583 781.726118 201.590809 791.367709 189.711248 791.367709L189.711248 791.367709zM877.373013 791.367709l-515.746324 0c-11.879562 0-21.537526-9.641591-21.537526-21.521153 0-11.864212 9.657964-21.457708 21.537526-21.457708l515.746324 0c11.799744 0 21.441335 9.593496 21.441335 21.457708C898.814348 781.726118 889.172757 791.367709 877.373013 791.367709L877.373013 791.367709z" p-id="7410" fill="#2c2c2c"></path>
        </svg>
        <svg t="1637047294588" class="tz" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15082" width="64" height="30">
        <path d="M671.786667 776.533333a160 160 0 0 1-151.296 151.253334L512 928l-8.533333-0.213333a160 160 0 0 1-151.253334-151.296L352 768v-10.666667H170.666667a32 32 0 0 1-30.421334-41.941333l1.834667-4.394667 8.234667-17.792 4.266666-9.813333 6.229334-14.933333c6.656-16.298667 14.421333-36.693333 22.186666-59.904 19.285333-57.941333 38.101333-132.48 40.704-207.274667l0.469334-27.392a288 288 0 0 1 277.717333-277.717333L512 96l10.112 0.170667a288 288 0 0 1 277.717333 277.717333l0.469334 27.392c2.56 74.794667 21.418667 149.333333 40.704 207.274667 10.368 31.018667 20.693333 56.832 28.416 74.837333l11.776 26.026667 0.725333 1.578666a32 32 0 0 1-23.893333 45.994667l-4.693334 0.341333h-181.333333V768l-0.213333 8.533333zM512 160l-9.216 0.170667a224 224 0 0 0-214.613333 214.357333l-0.426667 27.477333c-2.730667 83.925333-23.637333 165.546667-44.032 226.773334a1049.685333 1049.685333 0 0 1-23.893333 64.597333h584.405333l-7.552-18.986667a1054.848 1054.848 0 0 1-16.384-45.610666c-20.394667-61.226667-41.301333-142.848-43.989333-226.773334l-0.469334-27.221333a224 224 0 0 0-214.357333-214.613333L512 160z m96 597.333333h-192V768l0.213333 6.570667a96 96 0 0 0 191.573334 0L608 768v-10.666667z" p-id="15083" fill="#2c2c2c"></path>
        </svg>
      </div>
    </div>
    <div class="bar">
        <div>
          <router-link to="/home/homeAttention">关注</router-link>
        </div>
        <div>
          <router-link to="/home/homeRecommend">推荐</router-link>
        </div>
        <div>
          <router-link to="/home/homeNote">笔记</router-link>
        </div>
        <div>
          <router-link to="/home/homeVideo">视频</router-link>
        </div>
    </div>
    <div class="placeHolder"></div>
    <div class="text">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    
   

  </div>

</template>

<script>
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  props:["placeholder"],
  data: function(){
    return{
      path:null,
    }
  },
  methods: {
    toMenuNav: function(){
      this.$router.push({ path: '/menuNav' })
    },
    toSrearch:function(){
      this.$router.push({ path: '/search' })
    }
  },
  beforeRouteLeave(to, from, next) {
    this.path = from.fullPath;
    this.$router.options.routes[1].meta.path = from.fullPath;
    next();
  }
}
</script>

<style lang="less" scoped>
  .home{
    height: 10px;
    width: 100%;
    // left: 0;
    .placeHolder{
      height: 110px;
      width: 100%;
    }
    .text{
      padding-bottom: 60px;
    }
    .top{
      background-color: white;
      position: fixed;
      top: 0;
      z-index: 100;
      height: 70px;
      width: 100vw;
        display: flex;
        align-items: center;
        .add{
          height: 30px;
          width: 30px;
          line-height: 30px;
          font-size: 25px;
          border-radius: 50%;
          background-color: #ffc830;
          margin: 0 10px;
          text-align: center;
        }
        .input{
          height: 40px;
          flex: 1;
          position: relative;
          input{
            height: 100%;
            width: 100%;
            border: 0;
            text-indent: 2em;
            background-color: #f5f5f5;
            border-radius: 5px;
            text-indent: 2em;
          }
          .search{
            width: 20px;
            position: absolute;
            left: 10px;
            top: 10px;
          }
        }
        .right{
          height: 40px;
          width: 100px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .tz,.more{
            width: 30px;
          }
        }
      }
    .bar{
      background-color: white;
      // background-color: pink;
      position: fixed;
      top: 69px;
      z-index: 100;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding-bottom: 10px;
      font-size: 15px;
      a{
        text-decoration: none;
        color: #7f7f7f;
        text-decoration: none;
        position: relative;
        &.router-link-exact-active {
          color: black;
          font-size: 25px;
          &::after{
            content: '';
            display: block;
            height: 5px;
            width: 40px;
            background-color: orange;
            position: absolute;
            bottom: -9px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
          }
          // font-weight: 530;
        }
      }
    }
  }
</style>
